import React, { useEffect, useState } from 'react'
import MyHead from '../../components/MyHead'
import { useParams, useNavigate } from 'react-router-dom';
import { Ajax } from '../../api/api';
import { Image, List, Ellipsis, ErrorBlock, Empty } from 'antd-mobile'
import { QuestionCircleOutline } from 'antd-mobile-icons'

const MyLike = () => {
    const params: any = useParams()
    const router = useNavigate()
    const [data, setData] = useState<any>([])

    const getDataAsync = async () => {
        let data = params.type == 1 ? { hasLike: 1 } : { hasCollect: 1 }
        let res = await Ajax.getlikesdatabyphone(data) as any;
        if (res.code == 200) {
            setData(res.result)
        }
    }

    useEffect(() => {
        getDataAsync()
    }, [])

    return (
        <div className='mylikes pg'>
            <MyHead title={params.type == 1 ? '我的点赞' : '我的收藏'} />

            {
                data.length > 0 ? <div>
                    <List header={params.type == 1 ? '我的点赞' : '我的收藏'}  >
                        {data.map((item: any, index: number) => (
                            <List.Item
                                onClick={() => router('/good/' + item.goodId)}
                                key={item.id}
                                prefix={
                                    <Image
                                        src={item.good.img}
                                        style={{ borderRadius: 20 }}
                                        fit='cover'
                                        width={240}
                                        height={240}
                                    />
                                }
                                description={
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <span>{item.good.type.text} </span>
                                        <span>¥ {item.good.price} </span>
                                    </div>
                                }
                            >
                                <Ellipsis className="name" direction='end' rows={2} content={item.good.name} />
                            </List.Item>
                        ))}
                    </List>
                </div>
                    :
                    <div className="empty">

                        <Empty
                            style={{ padding: '64px 0' }}

                            description='暂无数据'
                        />
                    </div>
            }
        </div>
    )
}

export default MyLike